import React, { PropsWithChildren, useEffect } from "react"
import { View } from "@tarojs/components";
import { observer } from "mobx-react";
import viewMode from "@/store/viewMode";
import Taro from "@tarojs/taro";
import "./index.scss"

const Page: React.FC<PropsWithChildren<{
    className?: string,
    key?: string | number
}>> = observer((props) => {

    let timer: any = null

    Taro.useDidShow(() => {
        // 防止从其他页面不关闭弹窗直接返回
        // viewMode.setBehind(false)
    })
    useEffect(() => {
        timer = setInterval(() => {
            if (viewMode.isFllow) {
                const theme = Taro.getAppBaseInfo().theme
                const isNight = theme === 'dark'
                viewMode.setNight(isNight)
            }
        }, 400)
        return () => {
            clearInterval(timer)
        }
    }, [])
    const behind = (viewMode.isBehind || viewMode.isIdentityCheckWait) ? 'is-behind' : 'is-front'
    const black = viewMode.isNight ? 'is-night' : 'is-day'

    return <View className={`page number-family ${viewMode.fontSize}-font-size ${behind} ${black} ${props.className}`} key={props.key || viewMode.key}>
        {props.children}
    </View>
})

export default Page